<template>
  <div class="card mb-4">

    <header class="card-header">
      <p class="card-header-title mytitle">
        {{ note.title }}
      </p>
      <button class="card-header-icon" aria-label="more options">
        <span class="icon">
          <i class="fas fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </header>

    <div class="card-content">
      <div class="content">
        <p id="text">{{ note.content }}</p>
        <div class="append">
          <time>@ {{ note.datetime }}</time>
          <span>共 / {{ textLength }} / 字</span>
        </div>
      </div>
    </div>
    <footer class="card-footer">
      <router-link :to="`/edit/${note.id}`" class="card-footer-item">编辑</router-link>
      <a @click.prevent="showModal = true" class="card-footer-item">
        删除
      </a>
    </footer>

    <ModalDeleteNote v-if="showModal" v-model="showModal" ref="modalRef" :noteId="note.id" />

  </div>
</template>

<script setup> 
import { computed, ref } from 'vue';
import ModalDeleteNote from '@/components/notes/ModalDeleteNote.vue';

const showModal = ref(false)

const props = defineProps({
  note: {
    type: Object,
    required: true
  }
})

const textLength = computed(() => props.note.content.length);

</script>

<style lang="scss" scoped>
.mytitle {
  font-family: 'Times New Roman', Times, serif;
}

.content {
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 1px;

  #text {
    text-indent: 2em;
    line-height: 2;
  }

  .append {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
  }
}
</style>